import React, { Component } from 'react'
import ComC from './ComC'
import { NavLink } from 'react-router-dom';
export default class ComB extends Component {
  constructor() {
    super();
    // 状态机
    this.state = {
      age: 18,
      money: 1000,
      msg: '我是父组件的信息',
      childMsg: ''
    }
  }
  charge() {
    // 修改状态机中的数据状态,异步方法
    this.setState({
      money: this.state.money + 100
    }, ()=> {
      console.log(this.state.money);
    })
  }
  twoWayBind(e) {
    this.setState({
      msg: e.target.value
    })
  }
  // 父组件传给子组件的函数，函数中包含了获取数据之后的操作
  fn(data) {
    this.setState({
      childMsg: data
    })
  }
  render() {
    return (
      <div>
        <p>我的年龄：{this.state.age}</p>
        <p>我的余额：{this.state.money}</p>
        <button onClick={()=>this.charge()}>充值100元</button>
        <hr />
        <p>以下是react版的双向绑定：</p>
        {/* <input @input="fn1" :value="val" /> */}
        <input value={this.state.msg} onChange={(e)=>this.twoWayBind(e)}/>
        <p>{this.state.msg}</p>
        <hr />
        {/* 父传子，通过组件的标签属性传递，单向数据流，子组件不能修改父组件传过来的值 */}
        <ComC
          info={this.state.msg}
          info2="2"
          fn={this.fn.bind(this)}
        ></ComC>
        <p>子组件传过来的数据：{this.state.childMsg}</p>
        <hr />
        <NavLink to="/" activeClassName="active">首页</NavLink><br />
        <NavLink to="/coma" activeClassName="active">coma</NavLink><br />
        <NavLink to="/comb" activeClassName="active">comb</NavLink><br />
        <NavLink to="/comc" activeClassName="active">comc</NavLink><br /> 
      </div>
    )
  }
}
